<template>
  <view class="content">
    <updateAppPop></updateAppPop>
    <view class="top-shape"></view>
    <view class="wrapper">
      <view class="login">
        <view class="app-desc"> 智慧项目管理 </view>
        <view class="shape">
          <image mode="aspectFit" src="../../src/imgs/login-top.png"></image>
        </view>
        <view class="form">
          <view class="item">
            <view class="label">账户</view>
            <div class="input">
              <u--input class="input-body" v-model="name"></u--input>
            </div>
          </view>
          <view class="item">
            <view class="label">密码</view>
            <div class="input">
              <u--input
                password
                class="input-body"
                v-model="password"
              ></u--input>
            </div>
          </view>
        </view>
        <view class="submit" @click="submit()">
          <text class="first">登</text>
          <text>录</text>
        </view>
        <view class="action">
          <view class="remember">
            <view class="check">
              <view class="check_on">
                <view class="iconfont icon-duigou"></view>
              </view>
            </view>
            <div class="check-name">记住密码</div>
          </view>
          <view class="forget"> 忘记密码? </view>
        </view>
        <view class="register" @click="go()">
          <!-- <view class="version">{{version}}</view> -->
          <view class="desc">
            还没有账户？
            <text>点击注册</text>
            <view class="line"></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import updateAppPop from "@/components/update_app_pop/index.vue";
import { loginApi, appCheckApi, UserMsgregApi } from "@/api/common.js";
import { mapActions, mapGetters } from "vuex";
export default {
  components: {
    updateAppPop,
  },
  data() {
    return {
      name: "",
      password: "",
      lock: false,
      version: "",
    };
  },
  computed: {
    ...mapGetters({
      userInfo: "system/getUserInfo",
    }),
  },
  // created() {
  //   this.clearCache();
  // },
  methods: {
    ...mapActions({
      setUserInfo: "system/setUserInfo",
      setCurTab: "system/setCurTab",
    }),
    async submit() {
      if (this.lock) {
        return;
      }
      if (this.name == "") {
        uni.showToast({
          title: "请填写账户名称",
          duration: 1000,
          icon: "error",
        });
        return;
      }
      if (this.password == "") {
        uni.showToast({
          title: "请填写密码",
          duration: 1000,
          icon: "error",
        });
        return;
      }
      uni.showLoading({
        title: "加载中...",
      });
      this.lock = true;
      const { data } = await loginApi({
        name: this.name,
        password: this.password,
      });
      uni.setStorageSync("token", data.data.token);
      uni.hideLoading();
      this.lock = false;
      if (data.code === 1) {
        this.setUserInfo(data.data);
        this.setCurTab("statistics");
        uni.switchTab({
          url: "/pages/statistics/index",
        });
      } else {
        uni.showToast({
          title: data.msg,
          duration: 1000,
          icon: "error",
        });
      }
    },
    // // 清理缓存
    // clearCache() {
    //   let that = this;
    //   let os = plus.os.name;
    //   if (os == "Android") {
    //     let main = plus.android.runtimeMainActivity();
    //     let sdRoot = main.getCacheDir();
    //     let files = plus.android.invoke(sdRoot, "listFiles");
    //     let len = files.length;
    //     for (let i = 0; i < len; i++) {
    //       let filePath = "" + files[i]; // 没有找到合适的方法获取路径，这样写可以转成文件路径
    //       plus.io.resolveLocalFileSystemURL(
    //         filePath,
    //         function (entry) {
    //           if (entry.isDirectory) {
    //             entry.removeRecursively(
    //               function (entry) {
    //                 //递归删除其下的所有文件及子目录
    //                 uni.showToast({
    //                   title: "缓存清理完成",
    //                   duration: 2000,
    //                 });
    //                 that.formatSize(); // 重新计算缓存
    //               },
    //               function (e) {
    //                 console.log(e.message);
    //               }
    //             );
    //           } else {
    //             entry.remove();
    //           }
    //         },
    //         function (e) {
    //           console.log("文件路径读取失败");
    //         }
    //       );
    //     }
    //   }
    // },
  },
  onReady() {
    if (this.userInfo.user_id) {
      this.setCurTab("statistics");
      uni.switchTab({
        url: "/pages/statistics/index",
      });
    }
    // this.version = plus.runtime.version
    // console.log(this.version)
  },
};
</script>

<style lang="scss" scoped>
.down-tip {
  width: 100%;
  height: 200rpx;

  .top {
    width: 100%;
    text-align: center;
    font-size: 26rpx;
    color: #333;
    height: 100rpx;
    font-weight: bold;
    line-height: 100rpx;
  }

  .bottom {
    display: flex;
    justify-content: space-around;

    .custom-button {
      width: 180rpx;
    }

    .cancel {
      background-color: #999;
      color: #fff;
    }
  }
}

.version {
  position: absolute;
  right: 20rpx;
  bottom: 0;
  color: #d6d6d6;
  font-size: 15rpx;
}

.content {
  width: 750rpx;
  height: 100vh;
  background: #2e5efe;
  position: relative;

  .top-shape {
    width: 750rpx;
    height: 496rpx;
    background-color: #1534ce;
    border-bottom-left-radius: 50rpx;
    border-bottom-right-radius: 50rpx;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
  }

  .wrapper {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    .login {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 630rpx;
      height: 820rpx;
      background-color: #fafbfd;
      border-radius: 50rpx;

      .app-desc {
        position: absolute;
        bottom: -100rpx;
        width: 100%;
        height: 40rpx;
        text-align: center;
        font-size: 26rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 50rpx;
        letter-spacing: 16rpx;
        color: #fafbfd;
      }

      .shape {
        text-align: center;
        padding-top: 88rpx;
        padding-bottom: 70rpx;

        image {
          width: 142rpx;
          height: 101rpx;
        }
      }

      .form {
        width: 100%;
        padding-bottom: 25rpx;

        .item {
          margin: 0 auto;
          width: 432rpx;
          height: 72rpx;
          background-color: #ffffff;
          border-radius: 35rpx;
          box-shadow: 0 0 28rpx 14rpx rgba(#bcbcb5, 0.17);
          margin-bottom: 30rpx;
          @include clear();

          .label {
            float: left;
            width: 110rpx;
            text-align: right;
            font-size: 26rpx;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 5rpx;
            color: #dad9df;
            height: 72rpx;
            line-height: 72rpx;
          }

          .input {
            width: 322rpx;
            height: 72rpx;
            line-height: 72rpx;
            float: left;

            .input-body {
              box-sizing: border-box;
              width: 100%;
              height: 72rpx;
              line-height: 72rpx;
              padding: 0 !important;
              border: none;
              padding-left: 30rpx !important;
              padding-right: 30rpx !important;
              font-size: 26rpx;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0rpx;
              color: rgba(0, 0, 0, 0.7);

              /deep/ .u-input__content__field-wrapper__field {
                font-size: 26rpx !important;
              }
            }
          }
        }
      }

      .submit {
        margin: 0 auto;
        text-align: center;
        width: 432rpx;
        height: 72rpx;
        background-color: #1534ce;
        box-shadow: 0rpx 13rpx 35rpx 0rpx rgba(60, 90, 214, 0.42);
        border-radius: 35rpx;
        font-size: 26rpx;
        font-weight: normal;
        font-stretch: normal;
        color: #ffffff;
        line-height: 72rpx;
        margin-bottom: 30rpx;

        .icon {
          /deep/ .u-icon__icon {
            color: #fff !important;
            font-size: 60rpx !important;
          }
        }

        .first {
          margin-right: 39rpx;
        }
      }

      .action {
        width: 390rpx;
        height: 40rpx;
        margin: 0 auto;
        @include clear();

        .remember {
          float: left;
          height: 40rpx;

          .check {
            float: left;
            width: 22rpx;
            height: 22rpx;
            border: solid 2rpx #7f98ae;
            margin-top: 9rpx;
            text-align: center;
            line-height: 22rpx;
            box-sizing: border-box;

            .check_on {
              .iconfont {
                font-size: 16rpx;
                color: #7f98ae;
              }
            }
          }

          .check-name {
            float: left;
            margin-left: 16rpx;
            font-size: 21rpx;
            font-weight: bold;
            font-stretch: normal;
            height: 40rpx;
            line-height: 40rpx;
            letter-spacing: 3rpx;
            color: #7f98ae;
          }
        }

        .forget {
          float: right;
          font-size: 21rpx;
          font-weight: normal;
          font-stretch: normal;
          line-height: 40rpx;
          letter-spacing: 3rpx;
          color: #dad9df;
        }
      }

      .register {
        width: 100%;
        position: absolute;
        bottom: 37rpx;
        text-align: center;

        .desc {
          font-size: 21rpx;
          font-weight: normal;
          font-stretch: normal;
          line-height: 40rpx;
          letter-spacing: 3rpx;
          color: #dad9df;
          padding-bottom: 6rpx;
          display: inline-block;
          border-bottom: 3rpx solid #dad9df;

          text {
            font-size: 21rpx;
            font-weight: bold;
            letter-spacing: 3rpx;
            color: #b7b5bf;
          }
        }
      }
    }
  }
}
</style>
